<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #hello{
            width: 200px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <script>
        window.onload = function(){
            /**
             * 鼠标事件
             */
            var hello = document.getElementById('hello')
            hello.onmouseover = function(){
                console.log(111)
            }
            hello.onmouseout = function(){
                console.log(222)
            }

            /**
             * 键盘事件
             */
            var username = document.getElementById('username')
            username.onkeypress = function(event){
                // console.log(this.value)
                // console.log(event)
                if(event.keyCode === 13){
                    console.log(this.value)
                }
            }

            username.onfocus = function(){
                this.style.background = 'green'
            }
            username.onblur = function(){
                this.style.background = 'white'
            }

            /**
             * 表单提交
             */
            var myform = document.getElementById('myform')
            myform.onsubmit = function(){
                var username = document.getElementById('username').value
                var degree = document.getElementById('degree').value
                if(username == '' || degree == 0){
                    alert('请填写完整表单')
                    return false // 阻止表单提交
                }
                return true // 允许提交表单
            }
        }

        function getDegree(event){
            // console.log(event.target) // 事件源

            console.log(event.target.value)
        }
    </script>
</head>
<body>
    <div id="hello"></div> 

    <form action="" method="get" id="myform">
        用户名：<input type="text" id="username" name="username"> <br>
    
        学历：   
        <select name="degree" onchange="getDegree(event)" id="degree"> 
            <option value="0">--请选择学历--</option>
            <option value="1">大专</option>
            <option value="2" selected>本科</option>
            <option value="3">硕士</option>
            <option value="4">博士</option>
        </select> <br>

        <input type="submit" value="提交">
    </form>
</body>
</html>